<template lang="pug">
  div.h
    s-table(
      ref="table"
      :column="tableObj.column"
      :filterProps="{items: filterItems}"
      :queryFn="tableObj.getList"
      rowKey="psnNo"
      title="生物特征库"
      )
      .table-operator(slot="table-operator")
        el-button(size="small" type="primary" @click="importToggle(1)")  基本信息导入
        el-button(size="small" type="success" @click="addObj.visible = true") 新增模板
        el-button(size="small" type="primary" @click="importToggle(2)") 批量导入
      span(slot="faceTmplStas" slot-scope="text" :class="{'c_secondary': !text}") {{text ? '已建模' : '未建模'}}
      span(slot="fngpTmplStas" slot-scope="text" :class="{'c_secondary': !text}") {{text ? '已建模' : '未建模'}}
      span(slot="fngvTmplStas" slot-scope="text" :class="{'c_secondary': !text}") {{text ? '已建模' : '未建模'}}
      span(slot="irisTmplStas" slot-scope="text" :class="{'c_secondary': !text}") {{text ? '已建模' : '未建模'}}
      template(slot="action" slot-scope="text, scope")
        el-link.mr5(type="warning" :underline="false" @click="editHandle(scope.psnNo)") 编辑
        el-popconfirm(title="确定删除该人员吗？" @confirm="deleteHandle(scope.psnNo)" @onConfirm="deleteHandle(scope.psnNo)")
          el-link(type="danger" :underline="false" slot="reference") 删除
    modal-form(
      :formItems="addItems"
      :visible.sync="addObj.visible"
      title="新建模板"
      :submitting="addObj.submitting"
      :formSubmit="addSubmit"
    )
    //- 导入
    import-modal(:type="importObj.type" :visible.sync="importObj.visible")
    //- 编辑
    edit-modal(:id="editObj.id" :visible.sync="editObj.visible")
</template>
<script>
import { STable, ModalForm } from '@/components'
import { biologyList, biologyAdd, biologyDelete } from '@/api/libary'
import ImportModal from './ImportModal'
import EditModal from './EditModal'

const column = [
  {
    prop: 'psnNo',
    label: '编码',
    align: 'center'
  },
  {
    prop: 'psnName',
    label: '姓名'
  },
  {
    prop: 'certno',
    label: '身份证号码',
    align: 'center'
  },
  {
    prop: 'brdy',
    label: '出生日期',
    align: 'center'
  },
  {
    prop: 'crteTime',
    label: '添加时间',
    align: 'center'
  },
  {
    prop: 'faceTmplStas',
    label: '人脸建模',
    align: 'center'
  },
  {
    prop: 'fngpTmplStas',
    label: '指纹建模',
    align: 'center'
  },
  {
    prop: 'fngvTmplStas',
    label: '指静脉建模',
    align: 'center'
  },
  {
    prop: 'irisTmplStas',
    label: '虹膜建模',
    align: 'center'
  },
  {
    prop: 'action',
    label: '操作',
    width: '100',
    align: 'center'
  }
]

export default {
  name: 'Biology',
  components: {
    STable,
    ImportModal,
    ModalForm,
    EditModal
  },
  data () {
    return {
      tableObj: {
        column,
        getList: biologyList
      },
      addObj: {
        submitting: false,
        visible: false
      },
      importObj: {
        visible: false,
        type: 1
      },
      editObj: {
        id: '',
        visible: false
      }
    }
  },
  computed: {
    addItems () {
      return [
        {
          key: 'psnName',
          label: '人员名称',
          rules: [{ required: true, message: ' ' }]
        },
        {
          key: 'certno',
          label: '身份证号',
          rules: [{ required: true, message: ' ' }, { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '格式不正确' }]
        },
        {
          key: 'tmplType',
          label: '模板类别',
          type: 'radiobutton',
          initialValue: this.dict.SCEN_BOSG_TYPE_MAJCLS && this.dict.SCEN_BOSG_TYPE_MAJCLS[0] && this.dict.SCEN_BOSG_TYPE_MAJCLS[0].value,
          options: this.dict.SCEN_BOSG_TYPE_MAJCLS,
          rules: [{ required: true, message: ' ' }]
        },
        {
          key: 'photoUrl',
          label: '上传照片',
          type: 'upload',
          accept: 'image/*',
          action: this.BASE_URL + 'file/upload',
          'show-file-list': false,
          avatarFlag: true,
          progress: () => { this.addObj.submitting = true },
          change: () => { this.addObj.submitting = false },
          rules: [{ required: true, message: ' ' }]
        }
      ]
    },
    filterItems () {
      return [
        {
          key: 'keyword',
          label: '关键信息'
        },
        {
          key: 'tmplType',
          label: '生物类型',
          type: 'selectdict',
          dictKey: 'SCEN_BOSG_TYPE_MAJCLS'
        }
      ]
    }
  },
  created () {
    console.log(this.$route)
  },
  methods: {
    // 刷新表格
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    importToggle (type) {
      this.importObj = {
        type,
        visible: true
      }
    },
    // 删除人员
    deleteHandle (psnNo) {
      biologyDelete(psnNo).then(() => {
        this.$message.success('删除成功')
        this.refreshTable()
      })
    },
    editHandle (id) {
      this.editObj = {
        id,
        visible: true
      }
    },
    addSubmit (vals) {
      console.log(vals)
      this.addObj.submitting = true
      biologyAdd({ ...vals, photoUrl: vals.photoUrl[vals.photoUrl.length - 1].url }).then(() => {
        this.$message.success('提交成功')
        this.addObj.visible = false
        this.refreshTable(true)
      }).finally(() => {
        this.addObj.submitting = false
      })
    }
  }
}
</script>
